<template>
  <div class="aside">
    <div
      style="
        height: 59px;
        line-height: 59px;
        background: #545c64;
        color: #fff;
        text-align: center;
        border-bottom: 1px solid #434a50;
      "
    >
      <img src="@/assets/logo.png" alt="" width="160" height="59" />
    </div>
    <!-- <div class="toggle-button" @click="toggleCollapse">
      <i v-if="isCollapse" class="el-icon-caret-right"></i>
      <i v-else class="el-icon-caret-left"></i>
    </div> -->
    <el-menu
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      :router="true"
      :default-active="$route.path"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="/manageSystemTicketInfo">
        <i
          class="iconfont icon-tianmaohuopiaotongxing"
          style="margin-right: 8px"
        ></i>
        <span slot="title">门票信息</span>
      </el-menu-item>
      <el-menu-item index="/manageSystemCardInfo">
        <i class="iconfont icon-qiapian" style="margin-right: 8px"></i>
        <span slot="title">年卡信息</span>
      </el-menu-item>
      <el-menu-item index="/manageSystemUsers">
        <i class="iconfont icon-zhanghu" style="margin-right: 8px"></i>
        <span slot="title">账号信息</span>
      </el-menu-item>
      <el-menu-item index="/manageSystemTicketOrder">
        <i class="iconfont icon-dingdanjihe" style="margin-right: 8px"></i>
        <span slot="title">门票订单信息</span>
      </el-menu-item>
      <el-menu-item index="/manageSystemCardOrder">
        <i class="iconfont icon-dingdan-" style="margin-right: 8px"></i>
        <span slot="title">年卡订单信息</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["isCollapse"]),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(["toggleCollapseVuex"]),
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击按钮
    toggleCollapse() {
      this.toggleCollapseVuex();
    },
  },
};
</script>

<style scoped lang="scss">
.aside {
  height: 100%;
  background-color: #545c64;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-menu {
  border-right: none; // 解决左侧菜单边框线对不齐的问题
}

.toggle-button {
  background-color: #fff;
  border-bottom: 1px solid #cfdde6;
  font-size: 10px;
  line-height: 30px;
  color: #47484b;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;

  i {
    font-size: 18px;
  }
}

.toggle-button:hover {
  background-color: #ecf5ff;
}
</style>
